<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    </head>
    <body>
        <div id='app'>
            <!-- 循环简单数组 -->
            <p v-for="(item,index) in list">索引：{{index}} -- 值：{{item}}</p><hr>
            <!-- 循环对象数组 -->
            <p v-for="user in list2">id:{{user.id}}--name:{{user.name}}</p><hr>
            <!-- 遍历对象 -->
            <p v-for="(val,key) in user">{{key}}:{{val}}</p><hr>

            <!-- 迭代数字 -->
            <p v-for="count in 10">这是第{{count}}次循环</p><hr>

            <!-- 在2.2.0+的版本里面，当在组件找那个使用v-for必须加v-key -->
        </div>
    
    </body>
    <script>
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                list:[1,2,3,4,5,6],
                list2:[
                    {id:1,name:'zhangsan'},
                    {id:2,name:'lisi'},
                    {id:3,name:'wangwu'}
                ],
                user:{
                    id:1,
                    user:'shaohang',
                    age:20
                }
            },
            methods:{
                
            }
        })
    </script>
</html>